<template>
  <div>
    <headTop></headTop>
    <div style="margin-top: 10px">
      <el-button type="info" @click="selecetMutily()" v-if="show == false"
        >批量选择</el-button
      >
      <el-button type="info" @click="selecetMutily()" v-else
        >取消选择</el-button
      >

      <el-button
        type="warning"
        @click="deleteMutily()"
        :disabled="isDeleteEnable"
        >批量删除</el-button
      >
      <el-button type="primary" @click="clickAdddepart()">添加部门</el-button>
    </div>

      <el-table
        :data="departData"
        border
        style="width: 100%; margin-top: 10px"
        @selection-change="handleSelectionChange"
        :key="itemKey"
        ref="departTable"
      >
        <el-table-column v-if="show" type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="50" label="序号" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="部门名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="number"
          label="员工人数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="chargeName"
          label="负责人"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              :disabled='!isDeleteEnable'
              @click="handleEditClick(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button type="text" 
            :disabled='!isDeleteEnable'
            @click="removedepart(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-size="20"
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="currentPageChange"
      >
      </el-pagination>

    <atoast
      :show="isAddShow"
      :title="isEdit ? '修改部门' : '添加部门'"
      :buttonTitle="isEdit ? '修改' : '添加'"
      v-on:handleClick="handleClick"
      v-on:closehandle="closehandle"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="margin-top: 20px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-select v-model="staffId" filterable placeholder="请选择">
            <el-option
              v-for="item in staffList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </atoast>
  </div>
</template>
<script>
import search from "@/components/searchView";
import headTop from "@/components/headTop";
import { formatDate } from "@/utils/mUtils";
import {store} from "@/store/index";

import atoast from "@/components/AToast";
import {
  getDepartList,
  insertdepart,
  updatedepart,
  deletedepart,
  getStaffList
} from "@/api/getData";
export default {
  inject: ["reload"],
  data() {
    return {
      direction: "rtl",
      departData: [],
      totalCount: 0,
      currentPage: 0,
      currentPageSize: 20,
      pageCount: 1,
      form: {
        name: "",
        enable: true,
        id: 0,
      },
      show: false,
      isAddShow: false,
      multiSelectes: [],
      dialogVisible: false,
      itemKey: "",
      isDeleteEnable: true,
      isEdit: false,
      editIndex: 0,
      staffList: [],
      staffId: "",
    };
  },
  mounted() {
    this.getDepartList();
    this.getStaffList();
  },
  components: {
    search,
    headTop,
    atoast,
  },
  methods: {
    selecetMutily() {
      this.show = !this.show;
      this.$refs.departTable.clearSelection();
    },
    async getStaffList(){
      getStaffList()
        .then((res) => {
          if (res.code == 200){
             this.staffList = res.data.list;
          }
        })
        .catch((err) => {

        });
    },
    deleteMutily() {
      var ids = [];
      this.multiSelectes.forEach((element) => {
        ids.push(element.id);
      });
      var idPas = ids.join(",");
      if (!idPas.length) {
        return;
      }
      this.$confirm("是否批量删除选择的部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removedeparts(idPas);
          this.show = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    clickAdddepart() {
      this.isAddShow = true;
      this.isEdit = false;
      this.$refs["form"].resetFields();
    },
    handleSelectionChange(val) {
      this.isDeleteEnable = !val.length;
      this.multiSelectes = val;
    },
    closehandle() {
      this.isAddShow = false;
      this.staffId  = '';
    },
    handleEditClick(index, row) {
      this.isAddShow = true;
      this.isEdit = true;
      this.form = {
        name: row.name,
        id: row.id,
      };
      this.staffId = row.staff_id;
      this.editIndex = index;
    },
    handleClick() {
      if (this.isEdit) {
        this.updatedepart();
      } else {
        this.addNewdepart();
      }
    },
    currentPageChange(val) {
      this.currentPage = val;
      this.getDepartList();
    },
    removedepart(data) {
      this.$confirm("是否删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removedeparts(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    async addNewdepart() {
      try {
        if (this.form.name.length < 1) {
          this.$message({
            type: "error",
            message: "名称不能为空",
          });
          return;
        }
        var params = {
          name: this.form.name,
          staff_id: this.staffId,
        };
        const result = await insertdepart(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: result.msg,
          });
          this.closehandle();
          this.getDepartList();
          this.$refs["form"].resetFields();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
    async updatedepart() {
      try {
        if (this.form.name.length < 1) {
          this.$message({
            type: "error",
            message: "名称不能为空",
          });
          return;
        }
        var params = {
          name: this.form.name,
          staff_id: this.staffId,
          id: this.form.id,
        };
        const result = await updatedepart(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: result.msg,
          });
          this.closehandle();
          this.getDepartList();
          // this.$set(this.departData,this.editIndex,result.data);
          // this.reload();
          this.itemKey = Math.random();
          this.$refs["form"].resetFields();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
    async getDepartList() {
      try {
        var params = {
          page: this.currentPage,
          pageSize: this.currentPageSize,
        };
        const result = await getDepartList(params);
        if (result.code == 200) {
          this.departData = result.data.list;
          this.totalCount = result.data.total;
          this.pageCount = result.data.pages;
          this.reload();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
    changeValue(row) {
      console.log(row);
    },
    addChangeValue(row) {
      console.log(row);
    },
    async removedeparts(data) {
      try {
        let params = {
          id: data,
        };
        const result = await deletedepart(params);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getDepartList();
        }
      } catch (error) {
        this.$message({
          type: "error",
          message: error.message,
        });
      }
    },
  },
};
</script>

<style lang="less">
.buttons-content {
  margin: 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
}
.page-bottom {
  margin: 10px;
}
.adddepart-button {
  width: 100%;
  height: 44px;
  text-align: center;
  .el-button {
    width: 120px;
  }
}

.adddepart-title {
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  align-items: center;
  background-color: #67c23a;
  color: #fff;
  border-radius: 8px 8px 0px 0px;
}
.adddepart-card {
  width: 280px;
  margin: 10px auto;
  border-radius: 4px;
  box-shadow: 10px 10px 5px #dddddd;
  padding-bottom: 10px;
  .el-input {
    width: 80px;
  }
}
.adddepart-content {
  margin: 10px;
}
</style>